<template>
  <div class="shopping-cart">
    <div class="header">
      <h2>{{ title }}的购物车</h2>
    </div>
    <div>
      <div class="item" v-for="item in list" :key="item.id">
        <img :src="item.imgSrc" />
        <div class="name">{{ item.pname }}</div>
        <div class="price">￥{{ item.price }}</div>
        <div class="change">
          <a href="" @click.prevent="updateCount(item.id, -1)">－</a>
          <input type="text" class="num" v-model.number="item.count" />
          <a href="" @click.prevent="updateCount(item.id, 1)">＋</a>
        </div>
        <div class="rowPrice">￥{{ item.price * item.count }}</div>
        <div class="del" @click="deleteGood(item.id)">×</div>
      </div>
    </div>
    <div class="total">
      <span>总价：￥{{ totalPrice }}</span>
      <button>结算</button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
//定义默认导出的组件
export default {
  setup() {
    //定义数据
    const title = ref('张三');
    //定义商品列表
    const list = ref([
      { id: 333, price: 200, pname: 'tcl', imgSrc: "./img/a.jpg", flag: true, count: 1 },
      { id: 323, price: 100, pname: 'apple', imgSrc: "./img/b.jpg", flag: true, count: 2 },
      { id: 313, price: 300, pname: 'haier', imgSrc: "./img/c.jpg", flag: false, count: 1 },
      { id: 133, price: 350, pname: 'xiaomi', imgSrc: "./img/d.jpg", flag: false, count: 10 },
      { id: 233, price: 150, pname: 'pptv', imgSrc: "./img/e.jpg", flag: false, count: 11 },
    ]);
    //计算总价
    const totalPrice = computed(() =>
      list.value.reduce((total, item) => total + item.price * item.count, 0)
    );
    //更新商品数量
    const updateCount = (id, val) => {
      const item = list.value.find(item => item.id === id);
      if (item) {
        item.count += val;
        if (item.count < 1) {
          item.count = 1;
          alert('购买数量不能小于1');
        }
      }
    };
    //删除商品
    const deleteGood = (id) => {
      const index = list.value.findIndex(item => item.id === id);
      if (index !== -1) {
        list.value.splice(index, 1);
      }
    };
    //返回数据
    return {
      title,
      list,
      totalPrice,
      updateCount,
      deleteGood
    };
  }
};
</script>

<style scoped>
.shopping-cart {
  width: 450px;
  margin: auto;
}

.header {
  background-color: lightblue;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.total {
  background-color: #FFCE46;
  height: 50px;
  line-height: 50px;
  text-align: right;
}

.total button {
  margin: 0 10px;
  background-color: #DC4C40;
  height: 35px;
  width: 80px;
  border: 0;
}

.total span {
  color: red;
  font-weight: bold;
}

.item {
  height: 55px;
  line-height: 55px;
  position: relative;
  border-top: 1px solid #ADD8E6;
}

.item img {
  width: 45px;
  height: 45px;
  margin: 5px;
}

.item .name {
  position: absolute;
  width: 45px;
  top: 0;
  left: 55px;
  font-size: 16px;
}

.item .price {
  position: absolute;
  width: 45px;
  top: 0;
  left: 100px;
  font-size: 16px;
}

.item .change {
  width: 100px;
  position: absolute;
  top: 0;
  right: 150px;
}

.item .change a {
  font-size: 20px;
  width: 30px;
  text-decoration: none;
  background-color: lightgray;
  vertical-align: middle;
}

.item .change .num {
  width: 40px;
  height: 25px;
}

.item .rowPrice {
  position: absolute;
  width: 100px;
  top: 0;
  right: 50px;
  font-size: 16px;
}

.item .del {
  position: absolute;
  top: 0;
  right: 0px;
  width: 40px;
  text-align: center;
  font-size: 40px;
  cursor: pointer;
  color: red;
}

.item .del:hover {
  background-color: orange;
}
</style>
